import React, { useState } from "react";
import styled from "styled-components";
import NavBarAgain from "../components/NavBarAgain";
import ButtonAgain from '../components/ButtonAgain';
import { ImageUploader, Input, Toast } from 'antd-mobile'
import actions from "../store/action";
import { connect } from "react-redux";
import { upload, userUpdate } from '../api';

const Update = function Update(props) {
    let { queryUserInfoAsync, navigate } = props
    let [fileList, setFileList] = useState([{ url: props.base.pic }])
    let [val, setVal] = useState(props.base.name)

    const submit = async () => {
        // 表单校验
        if (fileList.length === 0) {
            Toast.show({
                icon: 'fail',
                content: '请先上传图片'
            });
            return;
        }
        if (val.trim() === "") {
            Toast.show({
                icon: 'fail',
                content: '请先输入账号'
            });
            return;
        }
        // 获取信息，发送请求
        let [{ url }] = fileList;
        try {
            let { code } = await userUpdate(val.trim(), url);
            if (+code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '修改信息失败'
                });
                return;
            }
            Toast.show({
                icon: 'success',
                content: '修改信息成功'
            });
            queryUserInfoAsync();//同步redux中的信息
            navigate(-1);
        } catch (_) { }
    }

    const beforeUpload = (file) => {
        if (file.size < 1024 * 1024) {
            return file
        } else {
            Toast.show({ icon: 'fail', content: '图片须在1MB内' })
            return null
        }

    }

    const onupload = async (file) => {
        let temp;
        try {
            let res = await upload(file);
            let { code, pic } = res;
            if (+code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '上传失败'
                });
                return;
            }
            temp = pic;
            setFileList([{
                url: pic
            }]);
        } catch (_) { }
        return { url: temp };
    }

    const ondelete = () => {
        setFileList([])
    }

    return (
        <UpdateBox>
            <NavBarAgain title="修改信息" />
            <div className="formBox">
                <div className="item">
                    <div className="label">头像</div>
                    <div className="input">
                        <ImageUploader
                            value={fileList}
                            beforeUpload={beforeUpload}
                            maxCount={1}
                            onDelete={ondelete}
                            upload={onupload}
                        />
                    </div>
                </div>
                <div className="item">
                    <div className="label">姓名</div>
                    <div className="input">
                        <Input placeholder='请输入内容' value={val} clearable
                            onChange={d => { setVal(d) }} />
                    </div>
                </div>
            </div>
            <ButtonAgain color='primary' className="submit" fn={submit}>提交</ButtonAgain>
        </UpdateBox>

    )
}

export default connect(
    state => ({ base: state.base }),
    actions.base
)(Update)
/* 样式 */
const UpdateBox = styled.div`
    .formBox {
        padding: 30px;

        .item {
            display: flex;
            align-items: center;
            height: 110px;
            line-height: 110px;
            font-size: 28px;

            .label {
                width: 20%;
                text-align: center;
            }

            .input {
                width: 80%;
            }
        }
    }

    .submit {
        display: block;
        margin: 0 auto;
        width: 60%;
        height: 70px;
        font-size: 28px;
    }
`;
